body {  
    margin: 0;  
    font-family: Arial, sans-serif;  
    display: flex;  
    flex-direction: column;  
    min-height: 100vh;  
}  

header, footer {  
    background-color: #333;  
    color: white;  
    text-align: center;  
    padding: 1em 0;  
}  

.content {  
    display: grid;  
    /* gap: 10px;   */
    /* padding: 10px;   */
    flex: 1;  
    box-sizing: border-box;  
    width: 100%; /* Ensure content takes full width */  
}  

.item {  
    background-color: #f4f4f4;  
    color: #333;  
    border: 1px solid #ddd;  
    border-radius: 8px;  
    /* padding: 10px;   */
    box-sizing: border-box;  
    display: grid;  
    /* gap: 10px; Gap between sub-items   */
}  

.sub-item {  
    background-color: #e0e0e0;  
    color: #333;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
    flex: 1 1 calc(24%); /* Adjust flex-basis for responsiveness */  
    box-sizing: border-box;  
    /* padding: 20px;   */
    text-align: center;
}  

/* Media Queries */  
@media (min-width: 960px) {  
    .content {  
        grid-template-columns: repeat(auto-fill, minmax(25%, 1fr)); /* Adjust based on item width and gap */  
    }  
    .item  {  
        /* flex: 1 1 calc(50% - 20px); 4 items per row */
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr)); /* Adjust based on item width and gap */   
    }  
}  

@media (min-width: 600px) and (max-width: 959px) {  
    .content {  
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr)); /* Adjust based on item width and gap */  
    }  
    .item {  
        /* flex: 1 1 calc(50% - 20px); 2 items per row   */
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr)); /* Adjust based on item width and gap */
    }  
}  

@media (max-width: 599px) {  
    .content {  
        /* grid-template-columns: 1fr; Single column layout   */
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* Adjust based on item width and gap */
        
    }  
    .item  {  
        /* flex: 1 1 100%; 1 item per row   */
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* Adjust based on item width and gap */
    } 
    .item .sub-item{
        height: 25vh;
    } 
}  